<template>
  <div>
    <div class="nav-left"
         @click="dialogBtn"
         @mousedown="down"
         @touchstart="down"
         id="moveDiv"
         @mousemove="move"
         @touchmove="move"
         @mouseup="end"
         @touchend="end">
      <i class="fa fa-bars"
         aria-hidden="true"></i>
      <div>菜</div>
      <div>单</div>
    </div>
    <transition name="slipLeft">
      <div class="sidebar"
           v-if="showDialog">
        <div class="logo-name">
          <div class="logoV"
               v-if="exitLogo"></div>
          <div class="logoV"
               v-if="!exitLogo"
               v-bind:style="{'background': 'url('+exitLogoUrl+')'}"></div>
          <p class="userName">{{userName}}</p>
        </div>
        <ul class="sidebar-list">
          <li @click="goToNewPage('/modifyPassword')">
            <i class="fa fa-lock leftIcon"></i>
            修改密码
            <i class="fa fa-angle-right rightIcon"></i>
          </li>
        </ul>
        <ul class="slider-nav-ul">
          <li class="slider-nav border-orange"
              @click="goToNewPage('/index',1)">案场助手<i class="fa fa-angle-right right-icon"></i></li>
          <li class="slider-nav border-orange"
              @click="goToNewPage('/org/orgIndex',2)">渠道管理<i class="fa fa-angle-right right-icon"></i></li>
          <li class="slider-nav border-orange"
              @click="goToNewPage('/premisesList',3)">楼盘分享<i class="fa fa-angle-right right-icon"></i></li>
          <li class="slider-nav"
              @click="goToNewPage('/bossBoardTop',4)">Boss看板 &nbsp; <span style="color:rgba(255, 106, 106, 1)">New!</span><i class="fa fa-angle-right right-icon"></i></li>
        </ul>
        <a href="javascript:;"
           class="sign-out"
           @click="signOut">退出</a>
        <div class="version">当前版本：{{version}}</div>
      </div>
    </transition>
    <div class="dialog-cover"
         @click="closeDialog"
         v-if="showDialog"></div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "silder-menu",
  data() {
    return {
      showDialog: false,
      exitLogo: true,
      userName: window.localStorage.getItem("2_userName"),
      position: { x: 0, y: 60 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      touchMoveEvents: [],
      sysMenu: 1,
      version: "11.1.01"
    };
  },
  mounted: function () {
    console.log(this.$route.path);
  },
  methods: {
    getExitLogo() {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/getLogo";
      var body = {};
      body.params = { logoType: "4" };
      _self.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        if (data.result == "1") {
          _self.exitLogoUrl = data.logoUrl;
          _self.exitLogo = false;
        }
      });
    },
    dialogBtn() {
      this.getExitLogo();
      this.showDialog = true;
      if (this.$route.path.indexOf("/premises") == 0) {
        this.sysMenu = 3;
      } else {
        this.sysMenu = 1;
      }
    },
    closeDialog() {
      this.showDialog = false;
    },
    signOut() {
      var _self = this;
      var body = {};
      var params = { userId: window.localStorage.getItem("2_userId") };
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/loginOut";
      _self.$http.post(url, body).then(
        (response) => {
          var data = response.body;
          window.localStorage.removeItem("2_isLogin");
          window.localStorage.removeItem("2_userId");
          window.localStorage.removeItem("2_password");
          window.localStorage.removeItem("2_phone");
          window.localStorage.removeItem("2_userName");
          window.localStorage.removeItem("b_beginDateTime");
          window.localStorage.removeItem("b_endDateTime");
          window.localStorage.removeItem("b_dimension");
          _self.$router.replace({
            path: "/login"
          });
        },
        (response) => {}
      );
    },
    goToNewPage(path, type) {
      let menuCode = "";
      let auth = false;
      if (type == 1) {
        menuCode = "menu_0008";
      } else if (type == 2) {
        menuCode = "menu_0010";
      } else if (type == 3) {
        menuCode = "menu_0011";
      } else if (type == 4) {
        menuCode = "menu_0013";
      }
      var res = JSON.parse(window.sessionStorage.getItem("2_resources"));
      if (res && res.length > 0) {
        for (var i = 0; i < res.length; i++) {
          if (menuCode == res[i]) {
            auth = true;
            break;
          }
        }
      }
      //没有类型时,代表修改密码,无权限设置.默认为true
      if (!type) {
        auth = true;
      }
      if (auth) {
        this.sysMenu = type;
        this.$router.push(path);
        this.showDialog = false;
      } else {
        Toast("您没有相应权限，请联系管理员开通");
      }
      // console.log(auth, res, path);
    },
    // 实现移动端拖拽
    down() {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move() {
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        moveDiv.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        var handler = function () {
          event.preventDefault();
        };
        document.addEventListener("touchmove", handler, { passive: false });
        this.touchMoveEvents.push(handler);
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
      for (var e in this.touchMoveEvents) {
        document.removeEventListener("touchmove", this.touchMoveEvents[e]);
      }
      this.touchMoveEvents = [];
      // this.showBackFixed =false;
    }
  },
  components: {}
};
</script>

<style scoped>
.version {
  font-size: 12px;
  position: fixed;
  left: 10px;
  bottom: 10px;
}
.nav-left {
  position: fixed;
  left: 0;
  top: 15%;
  width: 30px;
  padding: 10px;
  background: #fbdfcc;
  text-align: center;
  color: #f08c45;
  border-bottom-right-radius: 5px;
  z-index: 999;
}

/*侧边栏*/
.dialog-cover {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.dialog-cover {
  background: #000;
  opacity: 0.3;
  z-index: 6;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 66;
  width: 80%;
  padding-top: 180px;
  z-index: 1000;
}
.logo-name {
  position: absolute;
  top: 50px;
  left: 50%;
  text-align: center;
  margin-left: -50px;
  width: 100px;
}
.logo-name .logoV {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  background: url(../../assets/images/logoV.png) no-repeat center #eb6100;
  background-size: 54px auto;
  margin: 0 auto;
}
.logo-name .userName {
  color: #eb6100;
  font-size: 16px;
  padding-top: 16px;
}
.sidebar-list {
  padding-left: 10px;
}
.sidebar-list li {
  border-bottom: 1px solid #cdcdcd;
  padding: 8px 0;
  padding-left: 40px;
  line-height: 20px;
  height: 36px;
  position: relative;
  color: #333;
  margin-top: 8px;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.sidebar-list .leftIcon {
  position: absolute;
  left: 10px;
  color: #eb6100;
  top: 8px;
  font-size: 20px;
}
.sidebar-list .rightIcon {
  position: absolute;
  right: 20px;
  font-size: 20px;
  top: 7px;
  color: #cecece;
}
.sign-out {
  width: 168px;
  height: 36px;
  background-color: #fbe7dd;
  border: 1px solid #fd893b;
  margin: 80px auto 0;
  display: block;
  text-align: center;
  line-height: 34px;
  border-radius: 60px;
  color: #6c2c00;
  font-size: 16px;
}
.slider-nav-ul {
  margin-top: 35px;
  background-color: #fdefe5;
}
.slider-nav {
  color: #eb6100;
  height: 44px;
  line-height: 44px;
  margin: 0 10px 0 10px;
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider-nav .right-icon {
  position: absolute;
  right: 10px;
  font-size: 20px;
  top: 10px;
}
.border-orange {
  border-bottom: 0.1px solid #eb6100;
}
</style>